<template>
  <div class="header flex justify-between">
    <span class="station text-left">{{ fromStation }}</span>
    <Icon class="arrow_right" icon="teenyicons:arrow-right-solid" width="40" />
    <span class="station text-right">{{ toStation }}</span>
  </div>
</template>

<script setup>
import { inject, watch, onMounted, computed } from "vue";
import { Icon } from "@iconify/vue";
const $getActiveIndex = inject("$getActiveIndex");
const $changeActiveIndex = inject("$changeActiveIndex");
let $viewer = null;
const $datas = inject("$datas");
onMounted(() => {
  $viewer = inject("$viewer");
  // console.log($viewer)
});
const fromStation = computed(() => {
  return $datas.stations[$getActiveIndex()].name;
});
const toStation = computed(() => {
  if ($getActiveIndex() === $datas.stations.length - 1) {
    return $datas.stations[0].name;
  } else {
    return $datas.stations[$getActiveIndex() + 1].name;
  }
});
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  font-size: 18px;
  font-weight: 400;
  .arrow_right {
    display: inline-block;
    margin-inline: 15px;
  }
  .station {
    display: flex;
    align-items: center;
  }
}
</style>
